<template>
  <el-dialog
:model-value="visibleLocal" title="完成任务" width="400px" @close="onClose"
    @update:model-value="onDialogVisibleChange">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="收费金额" prop="paymentAmount" >
        <el-input v-model="form.paymentAmount" type="number"  :disabled="true"   />
      </el-form-item>
      <el-form-item label="是否已收款" prop="paymentReceived">
        <el-radio-group v-model="form.paymentReceived" placeholder="请选择">
          <el-radio :value=1 label="是" />
          <el-radio :value=0 label="否" />
        </el-radio-group>
      </el-form-item>
      <template v-if="form.paymentReceived === 1">
        <el-form-item label="收款日期" prop="paymentDate">
          <el-date-picker v-model="form.paymentDate" type="date" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="收款方式" prop="paymentMethod">
          <el-select v-model="form.paymentMethod" placeholder="请选择收款方式" clearable>
            <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.OA_PAY_METHOD)" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="收款公司" prop="collectionCompany">
          <el-input v-model="form.collectionCompany" type="text" placeholder="请输入收款公司" />
        </el-form-item> 
        <el-form-item label="是否开票" prop="isInvoiced">
          <el-radio-group v-model="form.isInvoiced" placeholder="请选择">
            <el-radio :value=1 label="是" />
            <el-radio :value=0 label="否" />
          </el-radio-group>
        </el-form-item>
        <template v-if="form.isInvoiced === 1">
          <el-form-item label="开票方" prop="invoicedCompany">
            <el-input v-model="form.invoicedCompany" type="text" placeholder="请输入开票方" />
          </el-form-item> 
          <el-form-item label="收票方" prop="payee">
            <el-input v-model="form.payee" type="text" placeholder="请输入收票方" />
          </el-form-item>
          <el-form-item label="开票日期" prop="invoicedDate">
             <el-date-picker v-model="form.invoicedDate" type="date" placeholder="请选择开票日期" style="width: 100%;" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="未开票原因" prop="notInvoicedReason">
            <el-input v-model="form.notInvoicedReason" type="textarea" placeholder="请输入未开票原因" />
          </el-form-item>
        </template>
      </template>
      <template v-else>
        <el-form-item label="未收款原因" prop="notPayReason">
          <el-input v-model="form.notPayReason" type="textarea" placeholder="请输入未收款原因" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

const props = defineProps<{
  visible: boolean
  row: any
}>()
const emits = defineEmits(['update:visible', 'confirm'])

const visibleLocal = ref(props.visible)
watch(() => props.visible, (val) => visibleLocal.value = val)
const onDialogVisibleChange = (val: boolean) => emits('update:visible', val)

const formRef = ref()
const form = ref({
  paymentReceived: 1,
  paymentDate: '',
  paymentAmount: '',
  paymentMethod: '',
  collectionCompany: '',
  notPayReason: '',
  isInvoiced: 1, // 默认未开票
  notInvoicedReason: '',
  invoicedCompany: '',
  payee: '',
  invoicedDate: '',
})

const rules = {
  paymentReceived: [{ required: true, message: '请选择是否已收款', trigger: 'change' }],
  paymentDate: [{ required: true, message: '请选择收款日期', trigger: 'change' }],
  paymentMethod: [{ required: true, message: '请输入收款方式', trigger: 'blur' }],
  // paymentAmount: [{ required: true, message: '请输入收费金额', trigger: 'blur' }],
  notPayReason: [{ required: true, message: '请输入未收款原因', trigger: 'blur' }],
  isInvoiced: [{ required: true, message: '请选择是否开票', trigger: 'change' }],
  notInvoicedReason: [{ required: true, message: '请输入未开票原因', trigger: 'blur' }],
  invoicedCompany: [{ required: true, message: '请输入开票方', trigger: 'blur' }],
  payee: [{ required: true, message: '请输入收票方', trigger: 'blur' }],
  invoicedDate: [{ required: true, message: '请选择开票日期', trigger: 'change' }],

}

watch(() => props.visible, (val) => {
  if (val && props.row) {
    form.value = {
      paymentReceived: props.row.paymentReceived ?? 1,
      paymentDate: props.row.paymentDate ?? '',
      paymentAmount: props.row.paymentAmount ?? '',
      paymentMethod: props.row.paymentMethod ?? '',
      collectionCompany: props.row.collectionCompany ?? '',
      notPayReason: props.row.notPayReason ?? '',
      isInvoiced: props.row.isInvoiced ?? 1,
      notInvoicedReason: props.row.notInvoicedReason ?? '',
      invoicedCompany: props.row.invoicedCompany ?? '',
      payee: props.row.payee ?? '',
      invoicedDate: props.row.invoicedDate ?? '',
    }
  }
})

const onClose = () => emits('update:visible', false)
const onConfirm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emits('confirm', { ...form.value })
    }
  })
}
</script>